<template>
  <div class="app-container">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      style="min-width: 50%;width: 600px"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>

      <el-form-item label="商品描述" prop="desc">
        <el-input
          v-model="ruleForm.desc"
          type="textarea"
          :rows="3"
        />
      </el-form-item>

      <el-form-item label="是否热销" prop="hot">
        <el-switch v-model="ruleForm.hot" />
      </el-form-item>

      <el-form-item label="商品价格" prop="price">
        <el-input v-model="ruleForm.price" />
      </el-form-item>

      <el-form-item label="商品品类" prop="cate">
        <SelectCate v-model="ruleForm.cate" />
      </el-form-item>

      <el-form-item label="商品排名" prop="rank">
        <el-input-number v-model="ruleForm.rank" :min="0" />
      </el-form-item>

      <el-form-item label="商品状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择">
          <el-option
            v-for="item in shopStatus"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="商品图片" prop="img">
        <el-upload
          action="http://10.36.138.16:9527/api/v1/uploadimg"
          name="addimg"
          :file-list="fileList"
          list-type="picture"
          class="upload-demo"
          :on-remove="removeImg"
          :on-success="successImg"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="submit('ruleForm')"
          v-text="this.shopId ? '点击修改' : '添加商品'"
        />
        <el-button
          type="primary"
          @click="resize('ruleForm')"
          v-text="'重置'"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SelectCate from '@/components/Good/SelectCate'
import { mapGetters } from 'vuex'
export default {
  components: {
    SelectCate
  },
  data() {
    return {
      ruleForm: {
        name: '',
        desc: '',
        hot: '否',
        price: '0',
        cate: '',
        rank: 0,
        img: ''
      },
      fileList: [],
      value: '',
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 1, max: 12, message: '商品名字需要1~12个字', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写商品描述信息', trigger: 'blur' },
          { min: 3, max: 50, message: '商品描述3~20字', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请填写商品价格', trigger: 'blur' }
        ],
        cate: [
          { required: true, message: '请填写商品品类', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请填写商品状态', trigger: 'change' }
        ],
        img: [
          { required: true, message: '请选择商品图片', trigger: 'blur' }
        ]
      },
      shopId: '',
      shopStatus: [
        { id: 1, value: '1', label: '有货' },
        { id: 2, value: '2', label: '缺货' },
        { id: 3, value: '3', label: '热销' },
        { id: 4, value: '-1', label: '下架' }
      ]
    }
  },
  computed: {
    ...mapGetters(['cates'])
    // img() {
    //   return [{name:'addimg', url: 'http://10.36.138.16:3000'+this.value}]
    // }
  },
  created() {
    // console.log(this.$route.params);
    this.shopId = this.$route.params.id
    if (this.shopId) {
      this.$goodsApi.fetchSearchShop({ _id: this.shopId }).then(res => {
        console.log(res)
        this.ruleForm = res.data
        this.value = res.data.img
        this.fileList = [{ name: 'addimg', url: 'http://10.36.138.16:3000' + this.value }]
        console.log(this.ruleForm)
      })
    }
  },

  methods: {
    submit(ruleForm) {
      console.log(this.ruleForm)
      this.$refs[ruleForm].validate(valid => {
        if (!valid) return false
        else {
          for (const key in this.ruleForm) {
            if (this.ruleForm[key] == undefined) return this.notify('注意', '参数缺失', 'warning')
          }
          if (this.shopId) {
            this.$goodsApi.fetchEditShop(this.ruleForm).then(res => {
              console.log(res)
              this.notify('编辑成功', '商品修改成功')
              this.$router.back()
            })
          } else {
            // console.log(this.ruleForm);
            this.$goodsApi.fetchAddShop(this.ruleForm).then(res => {
              // console.log(res);
              this.notify('添加成功', '新增了一条商品')
              this.$router.push('list')
            })
          }
        }
      })
    },
    resize(formName) {
      this.$refs[formName].resetFields()
      this.fileList = []
    },
    notify(title, message, type = 'success') {
      this.$notify({
        title,
        message,
        type
      })
    },
    successImg(res, file, fileList) {
      // console.log(res,file,fileList);
      this.ruleForm.img = res.data
      this.fileList = [file]
    },
    removeImg(f1, f2) {
      console.log(f1, f2)
    }
  }
}
</script>

<style>

</style>
